<template>
	<div class="port-page">
		<!-- 顶部按钮 -->
		<i class="el-icon-close close" @click="cancelf"></i>

		<div class="title" style="margin-top:20px;">{{this.params.row.jsmc}}教室时间段设置</div>
		<div class="but">
			<el-button type="warning" size="small" class="add btn" @click='cancelf'>返回</el-button>
		</div>
		<!-- 数据表格展示区域 -->
		<div class="all">
			<el-tabs v-model="activeName" @tab-click="handleClick" style="padding-left: 30%;width: 70%;">
				<el-tab-pane label="周一" name="1">
					<div style="text-align: center;"> 周一时间段修改
						<el-button type="success" size="small" class="add btn" @click='add' icon="el-icon-edit">保存</el-button>
						<el-dropdown @command="handleCommand" split-button type="primary" size="mini">
							<span class="el-dropdown-link">
						复制周一时间段到
						  </span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="2,3,4,5">周二、三、四、五</el-dropdown-item>
								<el-dropdown-item command="2">周二</el-dropdown-item>
								<el-dropdown-item command="3">周三</el-dropdown-item>
								<el-dropdown-item command="4">周四</el-dropdown-item>
								<el-dropdown-item command="5">周五</el-dropdown-item>
								<el-dropdown-item command="6">周六</el-dropdown-item>
								<el-dropdown-item command="0">周日</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</el-tab-pane>
				<el-tab-pane label="周二" name="2">
					<div style="text-align: center;"> 周二时间段修改
						<el-button type="success" size="small" class="add btn" @click='add' icon="el-icon-edit">保存</el-button>
					</div>
				</el-tab-pane>
				<el-tab-pane label="周三" name="3">
					<div style="text-align: center;"> 周三时间段修改
						<el-button type="success" size="small" class="add btn" @click='add' icon="el-icon-edit">保存</el-button>
					</div>
				</el-tab-pane>
				<el-tab-pane label="周四" name="4">
					<div style="text-align: center;"> 周四时间段修改
						<el-button type="success" size="small" class="add btn" @click='add' icon="el-icon-edit">保存</el-button>
					</div>
				</el-tab-pane>
				<el-tab-pane label="周五" name="5">
					<div style="text-align: center;"> 周五时间段修改
						<el-button type="success" size="small" class="add btn" @click='add' icon="el-icon-edit">保存</el-button>
					</div>
				</el-tab-pane>
				<el-tab-pane label="周六" name="6">
					<div style="text-align: center;"> 周六时间段修改
						<el-button type="success" size="small" class="add btn" @click='add' icon="el-icon-edit">保存</el-button>
						<el-dropdown @command="handleCommand2" split-button type="primary" size="mini">
							<span class="el-dropdown-link">
						复制周六时间段到
						  </span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="0">周日</el-dropdown-item>
								<el-dropdown-item command="1">周一</el-dropdown-item>
								<el-dropdown-item command="2">周二</el-dropdown-item>
								<el-dropdown-item command="3">周三</el-dropdown-item>
								<el-dropdown-item command="4">周四</el-dropdown-item>
								<el-dropdown-item command="5">周五</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</el-tab-pane>
				<el-tab-pane label="周日" name="0">
					<div style="text-align: center;"> 周日时间段修改
						<el-button type="success" size="small" class="add btn" @click='add' icon="el-icon-edit">保存</el-button>
					</div>
				</el-tab-pane>
			</el-tabs>
			<div class="table">
				<div class="center">
					<div class="z1">
						<p style="margin-top:0;">上午</p>
						<p>下午</p>
						<p>晚上</p>
					</div>
				</div>
				<div class="right">
					<ul>
						<li v-for=" vv in sjdlist ">
							<el-select v-model="vv.sjd1" style="width: 80px;float: left;">
								<el-option v-for=" v in hourlist " :label="v" :value="v"></el-option>
							</el-select>
							<el-select v-model="vv.sjd2" style="width: 80px;float: left;">
								<el-option v-for=" v in minslist " :label="v" :value="v"></el-option>
							</el-select>
							<div class="a" style="float: left;"> &nbsp;&nbsp;--&nbsp;&nbsp; </div>
							<el-select v-model="vv.sjd3" style="width: 80px;float: left;">
								<el-option v-for=" v in hourlist " :label="v" :value="v"></el-option>
							</el-select>
							<el-select v-model="vv.sjd4" style="width: 80px;float: left;">
								<el-option v-for=" v in minslist " :label="v" :value="v"></el-option>
							</el-select>
						</li>

					</ul>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	import qs from 'qs'
	import LoadingComponent from '../../../../components/loading'
	import AddComponent from './add'
	import EditComponent from './edit'
	import InfoComponent from './info'
	import DeleteComponent from './del'
	export default {
		components: {
			LoadingComponent,
			EditComponent,
			DeleteComponent,
			AddComponent,
			InfoComponent
		},
		props: ['params'],
		data() {
			return {
				activeName: '1',
				sjdlist: [],
				hourlist: ['', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22'],
				minslist: ['', '00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55']
			}
		},
		created() {
			this.vjsid = this.params.row.id;
			//加载页面时调用
			this.$store.dispatch('changeTitle', '教室上课时段'); //修改title
			this.$store.dispatch('changeRouterIndex', '/admin/jiaoshi'); //修改路由
			this.search(); //分页获取默认数据
			this.isLoading = true; //动画开始
		},
		mounted() {
			//加载完成之后event
			this.isLoading = false; //动画结束
		},
		methods: {
			handleClick(tab, event) {
				this.search();
			},
			handleCommand(command) {
				this.add()
				if (command=='2,3,4,5'){
					this.copysjd('1','2')  ;
					this.copysjd('1','3')  ;
					this.copysjd('1','4')  ;
					this.copysjd('1','5')  ;
				}else {
				  this.copysjd('1',command)
				}
			},
			handleCommand2(command) {
				this.copysjd('6',command)
			},
			copysjd(fromday,today){
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					jsid: this.params.row.id,
					toweek: today,
					fromweek:fromday, // 教室id
					yhid: logininfo.id,
					xxid: logininfo.xxid,
				})
				//执行
				this.axios.post(this.$store.state.api + 'jssjd/sjtb', params2)
					.then(res => {
						this.$message.success("保存成功!请查看核验");
						this.searchLoading = false;
					}).catch(res => {
						this.searchLoading = false;
					})
			},
			cancelf() {
				this.$store.dispatch('changeTitle', '教室管理'); //修改title
				this.$emit('close', {
					type: 'time',
					cancel: true
				})
			},
			search() {
				//查询搜索触发事件
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					jsid: this.params.row.id, // 教室id
					week: this.activeName,
					yhid: logininfo.id,
					xxid: logininfo.xxid,
				})
				//执行
				this.axios.post(this.$store.state.api + 'jssjd/getjssjdlist', params2)
					.then(res => {
						console.log(res,9999)
						this.sjdlist = res.data.data.list
						this.searchLoading = false;
					}).catch(res => {
						this.searchLoading = false;
					})
			},
			add() {
				var str1 = "";
				var str2 = "";
				var er1 = 0;
				var er2 = 0;
				var er3 = 0;
				var er4 = 0;
				var templist =[];
				
				
				for(let i in this.sjdlist) { 
					if(  this.sjdlist[i].sjd1=='' ||  this.sjdlist[i].sjd2 =='' ||  this.sjdlist[i].sjd3=='' || this.sjdlist[i].sjd4 =='' ) {
						continue;
					}
					var obj ={sjd1:this.sjdlist[i].sjd1,sjd2:this.sjdlist[i].sjd2,sjd3:this.sjdlist[i].sjd3,sjd4:this.sjdlist[i].sjd4};
					templist.push(obj);
				}
				
				
				//检查
				for(let i in templist) {
					er1 =templist[i].sjd1 +templist[i].sjd2
					er2 =templist[i].sjd3 +templist[i].sjd4  
					   if(er1>er2){
					   	isok=false;
						this.$message.warning("选择时间段有误 !");
						return
						} 
						var j=0;
						j=parseInt(i)+1;
						if(j >= templist.length){
							break;
						}
						er3 =templist[j].sjd1 +templist[j].sjd2
						er4 =templist[j].sjd3 +templist[j].sjd4 
						if (er3=='' || er4 =='') 
							continue;
						if(er3>er4){
						this.$message.warning("选择时间段有误 !");
						return;
						} 
						if(er3<er2){
						this.$message.warning("选择时间段有误 !");
						return;
						} 
				}
				
				
				for(let i in this.sjdlist) {
					str1 += this.sjdlist[i].sjd1 + ':' + this.sjdlist[i].sjd2 + "--" + this.sjdlist[i].sjd3 + ":" + this.sjdlist[i].sjd4 + ',';
					str2 += this.sjdlist[i].rocode + ',';
				}
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					rocodes: str2,
					sjds: str1,
					jsid: this.params.row.id, // 教室id
					yhid: logininfo.id,
					xxid: logininfo.xxid,
				})
				//执行
				this.axios.post(this.$store.state.api + 'jssjd/plupdate', params2)
					.then(res => {
						this.$message.success("保存成功!");
						this.searchLoading = false;
					}).catch(res => {
						this.searchLoading = false;
					})

			},
			/* 组件的弹框  */
			componentsShow(type, data) { //显示组件
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;
						if(type == 'add') {
							this.portComponents[i].params = this.vjsid;
						} else if(this.portComponents[i].data.type == 'single') {
							this.portComponents[i].data.index = data.row.id
						} else if(this.portComponents[i].data.type == 'multiple') {
							this.portComponents[i].data.index = this.multipleDelNum;
						} else {
							return;
						}
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				console.log(setting)
				for(let i in this.portComponents) {
					if(setting.type == this.portComponents[i].type) {
						this.portComponents[i].toggle = false;
						if(!setting.cancel) {
							this.search();
						}
						return;
					}
				}
			}
		},
		computed: {
			...mapState([
				'api' //域名
			])
		}
	}
</script>

<style lang="less" scoped>
	.port-page {
		//sonpage 子页面list begin
		position: absolute;
		top: 100px;
		left: 0;
		width: 100%;
		height: 100%;
		background: #E8EDF0;
		z-index: 99;
		padding-left: 15px;
		//sonpage 子页面list end
		font-size: 12px;
		.btn {
			height: 30px;
			padding: 0 10px;
			margin-left: 0;
		}
		.title {
			width: 100%;
			text-align: center;
			font-size: 20px;
		}
		// .but{
		//   width: 80%;
		//   margin-top: 20px;
		//   text-align: right;
		// }
		.table {
			margin-top: 20px;
			margin-left: 30%;
			overflow: hidden;
			width: 80%;
			/*.lift {
				float: left;
				p {
					width: 100px;
					border: 1px solid;
					height: 300px;
					text-align: center;
					line-height: 300px;
				}
			}*/
			/*.el-tabs__nav {
				position: relative;
				-webkit-transition: -webkit-transform .3s;
				transition: -webkit-transform .3s;
				transition: transform .3s;
				transition: transform .3s, -webkit-transform .3s;
				z-index: 2;
			}*/
			.center {
				float: left;
				margin-left: 10px;
				.z1 {
					width: 100px;
					height: 310px;
					p {
						width: 100px;
						height: 101px;
						text-align: center;
						line-height: 100px;
						border: 1px solid #ccc;
						margin-top: 2px;
					}
				}
			}
			.right {
				width: 400px;
				float: left;
				margin-left: 10px;
				ul {
					width: 100%;
					li {
						width: 100%;
						text-align: center;
						height: 50px;
						line-height: 50px;
						border: 1px solid #ccc;
						margin-top: 1px;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>
